<template>
  <div class="login-container">
    <!-- 背景 -->
    <div class="banner"></div>
    <!-- 登录or注册 -->
    <van-tabs
      class="tabs"
      color="#4a90e2"
      title-inactive-color="#3f3f3f"
      title-active-color="#4a90e2"
      :swipeable="true"
      line-height="4"
      line-width="112"
    >
      <van-tab title="登录">
        <denglu></denglu>
      </van-tab>
      <van-tab title="注册">
        <zhuce></zhuce>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import denglu from '@/views/login/components/login.vue'
import zhuce from '@/views/login/components/register.vue'
export default {
  // 定义属性
  data() {
    return {}
  },
  components: {
    denglu,
    zhuce
  },
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
.login-container {
  // background-color: #bbb;
  // 背景图样式
  .banner {
    width: 100%;
    height: 360px;
    background: url(~@/assets/loginbanner.png) no-repeat;
    background-size: contain;
  }
  // 导航

  .tabs {
    // 单个标签tab样式
    .van-tabs__nav {
      height: 112px;
    }
    .van-tab {
      width: 50%;
      height: 80px;
    }
    // 底部条样式
    .van-tabs__line {
      bottom: 30px;
      border-radius: unset;
    }
    // 清除底部内填充
    .van-tabs__nav--line {
      padding-bottom: unset;
    }
  }
}
</style>
